<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="title-top">
        <div>
          <el-input
            style="width: 200px"
            v-model="leftInput"
            placeholder="根据用户名搜索"
          ></el-input>
          <el-button size="small " @click="cleatInput">清空</el-button>
          <el-button type="primary" size="small" @click="searchInput"
            >搜索</el-button
          >
        </div>
        <div>
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="addPermissionsDia"
            >新增用户</el-button
          >
        </div>
      </div>
      <!-- 消息提醒 -->
      <el-alert type="info" show-icon> 共{{ total }}条消息 </el-alert>

      <!-- 添加权限 -->
      <permissions-add
        v-model="permisssionDia"
        text="新增用户"
        @addCloseDia="addCloseDia"
        :ParenformBase="formBase"
      />

      <!-- 表格 -->
      <el-table
        ref="multipleTable"
        :data="permtableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="title" label="用户名" width="730">
        </el-table-column>
        <el-table-column prop="create_date" sortable label="日期" width="730">
          <template slot-scope="{ row }">
            {{ parseTime(row.create_date) }}</template
          >
        </el-table-column>

        <el-table-column label="操作" show-overflow-tooltip width="120">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="permEditDia(row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delPeemission(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 编辑组件 -->
      <permissions-add
        v-model="permisssionEditDia"
        text="编辑用户"
        @editCloseDia="editCloseDia"
        ref="form"
        @newDataes="onLoadTable"
      />

      <!-- 分页 -->
      <page-nation
        :total="total"
        :formlist="formlist"
        @on-success="onLoadTable"
      />
    </el-card>
  </div>
</template>

<script>
import permissionsAdd from '../components/permissions-add.vue'
import { list, detail, remove } from '@/api/base/permissions'
import PageNation from '../components/PageNation.vue'
export default {
  name: 'permission',
  components: { permissionsAdd, PageNation },
  data () {
    return {
      leftInput: '',
      permisssionDia: false,
      permisssionEditDia: false,
      permtableData: [],
      checked: false,
      checkedArray: [], // 选中的数组
      total: 1,
      formlist: {
        page: 1,
        pagesize: 5, // 页尺寸
        title: ''
      }, // 页面分页
      formBase: []
      // row: {}
    }
  },

  created () {
    this.onLoadTable(this.formlist)
  },

  methods: {
    // 添加权限组弹窗
    addPermissionsDia () {
      this.permisssionDia = true
    },
    // 初始化表格数据
    async onLoadTable () {
      const res = await list(this.formlist)
      this.permtableData = res.data.list
      this.total = res.data.counts
      console.log(res)
    },
    // 选中的数组
    handleSelectionChange (val) {
      console.log(val)
      this.checkedArray = val
    },

    // 添加成功后关闭弹窗
    addCloseDia () {
      this.permisssionDia = false
      this.onLoadTable()
    },

    // 传值给编辑时子组件
    async permEditDia (row) {
      // this.row = row
      this.permisssionEditDia = true
      this.$refs.form.hanldeEditForm(row.id)
      // const res = await detail(row)
      // console.log(res.data)
      // this.formBase = res.data
      // this.$refs.form.formBase = res.data
    },

    // 编辑成功后关闭弹窗
    editCloseDia () {
      this.permisssionEditDia = false
      console.log(11)
      this.onLoadTable()
    },

    // 删除
    async delPeemission (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row)
          this.onLoadTable()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      // try {
      //   await remove(row)
      //   this.onLoadTable()
      // } catch (err) {
      //   console.log(err)
      // }
    },

    // 清空搜索框
    cleatInput () {
      this.leftInput = ''
      this.formlist.title = this.leftInput
      this.onLoadTable(this.formlist)
    },

    // 搜索input
    searchInput () {
      this.formlist.title = this.leftInput
      this.onLoadTable(this.formlist)
    },
    parseTime (time, cFormat) {
      if (arguments.length === 0) {
        return null
      }

      if ((time + '').length === 10) {
        time = +time * 1000
      }

      const format = cFormat || '{y}-{m}-{d}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate()
      }
      const timeStr = format.replace(/{(y|m|d)+}/g, (result, key) => {
        let value = formatObj[key]
        if (key === 'a') {
          return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
        }
        if (result.length > 0 && value < 10) {
          value = '0' + value
        }
        return value || 0
      })
      return timeStr
    }
  }
}
</script>

<style scoped lang="scss">
.title-top {
  display: flex;
  justify-content: space-between;
  .el-input {
    margin-right: 15px;
  }
}
.el-alert {
  margin: 20px 0;
}
::v-deep .el-alert__icon.is-big {
  font-size: 16px;
}
.el-form {
  margin-left: 120px;
}
// ::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
//   text-align: center;
// }
::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  text-align: center;
  border-bottom: 1px solid #ebeef5;
}
</style>
